<!--已选题目列表-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
    <legend>选题历史</legend>
</fieldset>
<table id="selected_table" class="layui-hide" lay-filter="selected_table"></table>

<!--可选题目列表-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
    <legend>可选题目</legend>
</fieldset>
<table id="select_table" class="layui-hide" lay-filter="select_table"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">选择</a>
</script>

<script type="text/javascript" src="/static/js/ajax.js"></script>
<script>
    layui.use(['table','layer'], function(){
        let  table = layui.table, layer=layui.layer;

        // 可选题目渲染
        table.render({
            elem: '#select_table'
            ,url:'/api/v1/student/titles'
            ,method:'GET'
            ,id:'can_select_table'
            ,parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code,   //解析接口状态
                    "msg": res.msg,     //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list    //解析数据列表
                };
            }
            ,cols: [[
                 {checkbox: true, fixed: true}
                ,{width:80, title: '序号',type:'numbers'}
                ,{field:'id', width:80, title: '序号', sort: true,hide:true}
                ,{field:'titleName', width:360, title: '题目名称'}
                ,{width:130, title: '指导教师',
                    templet:function(d){
                        return d.teacher.teacherName}
                }
                ,{field:'totalCount', width:88, title: '可选人数'}
                ,{field:'selectCount', title: '已选人数', width:88}
                ,{field:'releaseTime', width:120, title: '发布时间', sort: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:161}
            ]]
            ,page: true
        });

        // 已选题目渲染
        table.render({
            elem: '#selected_table'
            ,url:'/api/v1/student/selected-title'
            ,method:'GET'
            ,id:'selected_table'
            ,parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.count,
                    "data": res.data
                };
            }
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{width:80, title: '序号',type:'numbers'}
                ,{field:'id', width:80, title: '序号', sort: true,hide:true}
                ,{width:360, title: '题目名称',templet:function (d) {
                    return d.title.titleName}}
                ,{width:130, title: '指导教师', templet:function(d){
                    return d.title.teacher.teacherName}}
                ,{field:'selectTime', width:274, title: '选择时间', sort: true}
                ,{field:'selectStatus',width:200,title:'状态'}
                // ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:161}
            ]]
            ,page: false
        });

        // 查看某个可选题目的详情
        function get_subject_detail(id){
            layer.open({
                type: 2,
                title:'可选题目详情',
                area: ['672px', '347px'],
                content: '/static/page/teacher/title_detail.html',
                shadeClose: true,
                success: function(layero, index){
                    postAJAX("GET","/api/v1/teacher/title/"+id,null,null,(data)=>{
                        // 详情页内容填充,与编辑时基本相同
                        var body = layer.getChildFrame('body', index);
                        var input_array=body.find('input');
                        input_array[0].value=data.data.titleName;
                        input_array[1].value=data.data.major.majorName;
                        input_array[2].value=data.data.totalCount;
                        input_array[3].value=data.data.releaseTime;
                        input_array[4].value=data.data.updateTime;
                        $(body.find('textarea')[0]).html(data.data.titleDetail);
                    });
                }
            })
        }


        function select_project(id){
            layer.confirm('是否确认选择该题目</br><p style="color: red">注意！！！！选择改题目后不能再重新选择其他题目,请谨慎选择</p>', {
                btn: ['确认', '取消']
                },function(index, layero){
                    postAJAX("POST","/api/v1/student/title/"+id,null,null,(data)=>{
                        if(data.code==514){
                            layer.msg("您已经选择题目,不能重复选择")
                        } else if (data.code==515){
                            layer.msg("该题目已达可选人数上限,请选择其他题目")
                        }else if(data.code==501){
                            layer.msg("选择失败")
                        }  else if(data.code==900){
                            layer.msg("当前不在允许的时间范围内,请勿重复进行操作");
                        } else{
                            layer.msg("选择成功");
                            layer.close(index);
                            table.reload('selected_table');
                        }
                    });
                }
            );
        }

        // 监听每一行的工具条
        table.on('tool(select_table)', function(obj){
            let data = obj.data;
            let layEvent = obj.event;
            if(layEvent === 'detail'){
                get_subject_detail(data.id);
            } else if(layEvent === 'edit'){
                select_project(data.id);
            }
        });
    });
</script>